<template>

  <center>
<!--    <h1>  正文  解约协议录入ContractCloseAdd</h1>-->
    <div >

      <el-form :inline="true" :model="formInline" class="demo-form-inline">




        <el-form-item label="收房合同号">
          <el-input v-model="formInline.id" placeholder="收房合同号"></el-input>
        </el-form-item>



        <el-button type="text" @click="dialogVisible = true">收房合同查询</el-button>
        <br>
        <!--      222 222   222   222    222 222   222   222    222 222   222   222  1-->




        <el-form-item label="收房合同编号">
          <el-input v-model="formInline.sfContractNo" placeholder="解约协议编号"></el-input>
        </el-form-item>


        <el-form-item label="房产信息">
          <el-input v-model="formInline.houseName" placeholder="录入人"></el-input>
        </el-form-item>

        <br>
        <!--      222 222   222   222    222 222   222   222    222 222   222   222  2-->

        <el-form-item label="产权地址">
          <el-input v-model="formInline.cqAddress" placeholder="解约协议编号"></el-input>
        </el-form-item>


        <el-form-item label="房产证书编号">
          <el-input v-model="formInline.houseZsNo" placeholder="录入人"></el-input>
        </el-form-item>

        <br>
        <!--      222 222   222   222    222 222   222   222    222 222   222   222  3-->

        <el-form-item label="业主姓名">
          <el-input v-model="formInline.ownerName" placeholder="解约协议编号"></el-input>
        </el-form-item>


        <el-form-item label="业主联系方式">
          <el-input v-model="formInline.ownerMobile" placeholder="录入人"></el-input>
        </el-form-item>

        <br>
        <!--      222 222   222   222    222 222   222   222    222 222   222   222  4-->

        <el-form-item label="签约人姓名">
          <el-input v-model="formInline.signUserName" placeholder="解约协议编号"></el-input>
        </el-form-item>


        <el-form-item label="签约人电话">
          <el-input v-model="formInline.signUserMobile" placeholder="录入人"></el-input>
        </el-form-item>
        <br>


        <!--      222 222   222   222    222 222   222   222    222 222   222   222  5-->




        <el-form-item label="协议收录日期">

        <el-date-picker
          v-model="formInline.wyjgDate"
          type="datetime"
          placeholder="选择日期时间"

          value-format="yyyy-MM-dd HH:mm:ss"
        />
        </el-form-item>








        <el-form-item label="解约类型">
          <el-input v-model="formInline.terminationType" placeholder="录入人"></el-input>
        </el-form-item>

        <br>

        <!--      222 222   222   222    222 222   222   222    222 222   222   222  6-->




        <el-form-item label="备注">
          <el-input v-model="formInline.remark" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <br>


      <el-button type="primary" @click="saveSfTermination">add</el-button>

      <!--对话框  对话框  对话框   对话框   对话框  对话框  对话框  对话框   对话框   对话框  对话框  st-->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">





        <!--      <template>-->

        <!--        <div id="about">-->


        <el-table
          :data="tableData"
          stripe
          style="width: 100%">

          <el-table-column
            prop="ownerName"
            label="业主姓名"
            width="180">
          </el-table-column>



          <el-table-column
            prop="premiseName"
            label="房产信息"
            width="180">
          </el-table-column>





          <el-table-column
            prop="conInfoTime"
            label="签约日期">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">


              <el-button
                size="mini"
                type="success"
                @click="xuanz(scope.row.id)">选中</el-button>

            </template>
          </el-table-column>


          <!--    身份证照片 *3-->

          <el-form-item label="身份证正面">
            <el-upload :on-success="handleAvatarSuccess" :show-file-list="false" class="avatar-uploader"  action="http://localhost:9999/house-resource/oss/uploadfile">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>




          <el-form-item label="身份证反面">
            <el-upload :on-success="handleAvatarSuccess2" :show-file-list="false" class="avatar-uploader"  action="http://localhost:9999/house-resource/oss/uploadfile">
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>


          <el-form-item label="手持身份证">
            <el-upload :on-success="handleAvatarSuccess3" :show-file-list="false" class="avatar-uploader"  action="http://localhost:9999/house-resource/oss/uploadfile">
              <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>






        </el-table>

        <!--    =======================分页 分页 分页 分页 分页 分页 分页======================================-->


        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"

            :current-page="current"
            :page-sizes="[3, 4, 5]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">

          </el-pagination>



        </div>
        <!--    =======================分页 分页 分页 分页 分页 分页 分页   end======================================-->
        <!--        </div>-->


        <!--      </template>-->



        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>


      <!--    对话框  对话框  对话框   对话框   对话框  对话框 对话框  对话框   对话框   对话框  对话框  end-->



<!--      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">-->


<!--        <el-form-item-->
<!--        >-->

<!--          押金:<el-input style="width: 120px" v-model="itemType1"></el-input>-->

<!--          金额:<el-input style="width: 120px" v-model="amount1"></el-input>-->


<!--          备注:<el-input style="width: 120px" v-model="detailRemark1"></el-input>-->


<!--          <el-button @click.prevent="removeGrade(grade)">删除</el-button>-->
<!--        </el-form-item>-->

<!--        <el-form-item>-->
<!--          <el-button @click="addDomain">新增成绩</el-button>-->
<!--        </el-form-item>-->

<!--      </el-form>-->


      <span >==================================================================================</span>

      <!--动态增加2  动态增加2  动态增加2  动态增加2   动态增加2  动态增加2  动态增加2-->
<!--      <el-form :model="dynamicValidateForm2" ref="dynamicValidateForm2" label-width="100px" class="demo-dynamic">-->


<!--        <el-form-item-->
<!--          v-for="(grade2, index) in dynamicValidateForm2.grades2"-->
<!--          :label="'成绩' + (index+1) "-->
<!--          :key="grade2.key"-->
<!--        >-->

<!--          科目:<el-input style="width: 120px" v-model="grade2.courseName"></el-input>-->
<!--          成绩:<el-input style="width: 120px" v-model="grade2.fraction"></el-input>-->
<!--          <el-button @click.prevent="removeGrade2(grade2)">删除</el-button>-->
<!--        </el-form-item>-->

<!--        <el-form-item>-->
<!--          <el-button @click="addDomain2">新增成绩</el-button>-->
<!--        </el-form-item>-->

<!--      </el-form>-->


    </div>

  </center>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      current:1,
      size:3,
      total:0,
      formInline: {
        id:'',

      },
      dialogVisible: false,
      imageUrl: '',
      imageUrl2: '',
      imageUrl3: '',


    }
  },
  created() {

    this.initdate()
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    initdate()
    {


      this.axios.get("http://localhost:9999/house-foreclosure/tSfContract/searchSfAll",

        {
          params:{
            pageNum:this.current,
            pageSize:this.size,

          }
        }

      ).then((response) => {

        this.tableData=response.data.obj.list

        this.total=response.data.obj.total
      })


    },
    handleSizeChange(val) {
      this.size=val
      this.initdate()
    },

    handleCurrentChange(val) {

      this.current=val
      this.initdate()
    },xuanz(row)
    {

      console.log(row)

      this.axios.get("http://localhost:9999/house-foreclosure/tSfContract/searchSfAllById",{

          params:{
            sfContractId:row
          }
        }
      ).then((response) => {

        this.formInline=response.data.obj


      })

    },saveSfTermination(){


      this.axios.post("http://localhost:9999/house-foreclosure/tSfContract/saveSfTermination",this.formInline

      ).then((response) => {

      this.$router.push({path:"ContractClosetList"})

      })








    },//upload   end
  handleAvatarSuccess(res, file) {
    console.log("这是参数999999", res, file)
    this.imageUrl = URL.createObjectURL(file.raw);  //展示图片
    // if (res) {
    //   this.form.img = res   //记录上传的地址 让其一会保存到数据库，显示在前台
    // }

  }, handleAvatarSuccess2(res, file) {
    console.log("这是参数999999", res, file)
    this.imageUrl2 = URL.createObjectURL(file.raw);  //展示图片
    // if (res) {
    //   this.form.img = res   //记录上传的地址 让其一会保存到数据库，显示在前台
    // }

  }, handleAvatarSuccess3(res, file) {
    console.log("这是参数999999", res, file)
    this.imageUrl3 = URL.createObjectURL(file.raw);  //展示图片
    // if (res) {
    //   this.form.img = res   //记录上传的地址 让其一会保存到数据库，显示在前台
    // }

  }





  }
}
</script>
